<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="script/zTree/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="pages/system/css/rolemng.css" />
<style>
.addZtree{
    margin-top: 10px;
    border: 1px solid #617775;
    background: #f0f6e4;
    width: 208px;
    height: 140px;
    overflow-y: scroll;
    overflow-x: auto;
    }
</style>
<div class="row-fluid">
	<div class="span12">
		<ul class="breadcrumb">
			<li><span class="c-999">系统管理</span> <i class="icon-angle-right"></i>
			</li>
			<li><a class="c-666"
				onclick="util.showContent('pages/system/rolemng.jsp')">角色管理</a>
			</li>
		</ul>
	</div>
</div>
<div class="row-fluid">
	<div class="leftdiv">
		<div class="table-head">&nbsp;&nbsp;&nbsp;<i class="icon-reorder"></i>&nbsp;角色列表
		</div>
		<div id="buttomArea">
			<p>
				<button id="role_add" class="btn blue hide" data-toggle="modal">新&nbsp;增</button>
				<button id="role_lock" class="btn bg-orange hide" data-toggle="modal">锁&nbsp;定</button>
				<button id="role_edit" class="btn green hide" data-toggle="modal">编&nbsp;辑</button>
				<button id="role_delete" class="btn red hide" data-toggle="modal">删&nbsp;除</button>
			</p>
			<div id="searchArea">
				<input type="text" class="searchText" placeholder="输入关键字搜索角色"
					onkeyup="onSearchEnter(this)" style="width:237px;">
			</div>
		</div>
		<div id="menuTree">
			<ul id="treeDemo" class="ztree"> 
			</ul>
		</div>
	</div>
	<div id="roleInfo" class="rightdiv">
		<div class="row-fluid">
			<div class="span12">
				<div class="portlet box green" style="border: none;">
					<div class="table-head">&nbsp;&nbsp;&nbsp;<i class="icon-reorder"></i>&nbsp;角色信息
					</div>
					<div class="portlet-body">
						<table class="search-body" border="0" cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td>
									<label class="my-label"><span>角色名：</span>
										<span type="text" id="id_roleName" />
									</label>
									<label class="my-label"><span>是否锁定：</span><input id="id_isLock" type="checkbox" name="isLock" disabled="disabled" /></label>
								</td>
							</tr>
							<tr><td colspan="2">
									<label class="my-label"><span>初始首页：</span>
										<span type="text" id="id_homePage" />
									</label>
								</td>
							<tr>
								<td colspan="2">
									<label class="my-label"><span>描述：</span>
										<span type="text" id="id_remark" />
									</label>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="portlet box" id="userTable">
					<div class="portlet-body">
						<p>
							<button id="add_user_to_role" class="btn blue hide" data-toggle="modal">添加用户到角色</button>
							<button id="delUserFromRole" class="btn red hide" data-toggle="modal">从角色中删除用户</button>
							<button id="edit_resource" class="btn green hide" data-toggle="modal">分配资源</button>
						</p>
						<div class="table-responsive">
							<table class="table table-striped table-hover table-bordered" id="sys_roleUser_table">
								<thead>
									<tr>
										<th class="sorting_asc_disabled" style="width:8px;"><input
											type="checkbox" class="group-checkable"
											data-set="#sys_roleUser_table .checkboxes" />
										</th>
										<th class="fourMinWidth">用户名</th>
										<th class="fourMinWidth">真实姓名</th>
										<th class="fourMinWidth">所属角色</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<jsp:include page="/pages/common/modal.jsp"></jsp:include>
<div id="addRole" class="modal hide fade" tabindex="-1"
	data-focus-on="input:first">
	<div class="modal-header add-customer-header bg-green c-bold c-fff" id="add_role_title">
		新增角色
	</div>
	<div class="modal-body add-customer-body">
		<form id="role_form">
			<input type="hidden" id="form_pkId"/>
			<table class="table">
				<tr>
					<td><span class="al-right"><i class="c-red">*&nbsp;</i>角色名称：</span>
					<input id="form_roleName" name="roleName" class="my-text" maxlength="16" /></td>
				</tr>
				<tr>
					<td>
						<span class="al-right"><i class="c-red">*&nbsp;</i>初始首页：</span><input type="text" id="add_parentName" name="parentName" readonly onclick="add_showMenu(); return false;" />
					    <input type="hidden" id="add_parentId" name="parentId" value="" /> 
					    <div id="add_resContent" style="position:absolute;z-index: 100;left:99px;top:27px;display:none">  
				            <ul id="add_resTreeDemo" class="ztree addZtree">  
				            </ul>  
					    </div>
					</td>
				</tr>
				<tr>
					<td><span class="al-right">描述：</span>
					<input id="form_roleDesc" name="roleDesc" class="my-text" maxlength="32" /></td>
				</tr>
				<tr>
					<td><span class="al-right">锁定：</span><input id="form_isLock" type="checkbox" name="isLock"/></td>
				</tr>
			</table>
		</form>
	</div>
	<div class="modal-footer al-center bg-fff">
		<button type="button" class="btn green"
			style="margin-right: 25px;" id="form_role_save">保存</button>
		<button type="button" data-dismiss="modal" class="btn red"
			id="form_btn_close">取消</button>
	</div>
</div>
<div id="edit_role_resource" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
	<div class="modal-header add-customer-header bg-green c-bold c-fff" id="edit_res_title">
		分配角色资源
	</div>
	<div class="modal-body add-customer-body">
		<form id="role_resource_form">
			<input type="hidden" id="form_role_pkId"/>
			<table class="table">
				<tr>
					<td>
						<span class="al-right">选择资源：</span>
						<input type="text" id="parentName" name="parentName" readonly onclick="showMenu(); return false;" />
					    <input type="hidden" id="parentId" name="parentId" value="" /> 
					    <div id="resContent">
				            <ul id="resTreeDemo" class="ztree">
				            </ul>  
					    </div>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="modal-footer al-center bg-fff">
		<button type="button" class="btn green"
			style="margin-right: 25px;" id="form_roleres_save">保存</button>
		<button type="button" data-dismiss="modal" class="btn red"
			id="form_res_btn_close">取消</button>
	</div>
</div>
<div id="addUserToRole" class="modal fade" tabindex="-1"
	data-focus-on="input:first" style="display:none">
	<div class="modal-header add-customer-header bg-green c-bold c-fff" id="addUser_title">
		添加用户
	</div>
	<div class="modal-body">
		<div class="search-box">
			<div class="search-title">
				<span class="search-criteria c-666">&nbsp;查询条件</span>
			</div>
			<form id="user_select_form">
				<table class="table" id="query_user">
					<tr>
						<td><span class="o-span al-right">关键字：</span><input type="text"
							id="user_userKey" placeholder="请输入用户名或真实姓名查询"/></td>
						<input style="display:none;" />
					</tr>
				</table>
			</form>
			<ul class="search-button">
				<li>
					<button class="btn blue" id="query_user_btn">查&nbsp;&nbsp;询</button>
				</li>
				<li>
					<button class="btn blue" id="user_reset">重&nbsp;&nbsp;置</button>
				</li>
			</ul>
		</div>
		
		<div class="table-responsive">
			<table class="table table-bordered table-striped table-hover" style="width:100%;"
				id="sys_user_select_table">
				<thead>
					<tr>
						<th class="sorting_asc_disabled" style="width:8px;"><input
							type="checkbox" class="group-checkable"
							data-set="#sys_user_select_table .checkboxes" /></th>
						<th class="fourMinWidth">用户名</th>
						<th class="fourMinWidth">真实姓名</th>
						<th class="fourMinWidth">所属角色</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<div class="modal-footer" id="modal-footer">
		<button type="button" data-dismiss="modal" id="add_user_btn_close"
			class="btn">关闭</button>
		<button type="button" class="btn blue" id="add_user_for_role">确定</button>
	</div>
</div>
<script type="text/javascript" src="script/zTree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="script/zTree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript" src="script/zTree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="pages/system/js/rolemng.js"></script>
<script type="text/javascript" src="media/js/ui-modals.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function() {
	});
</script>